const tbody = document.querySelector("#list-tbody");
getData();
function getData() {
  utils.fetch("/api/shop/list").then(resp => {
    console.log(resp);
    if (resp.code === 200) {
      const { list } = resp.body;
      // let html = ''
      // list.forEach(shop => {
      //   html += `<tr>
      //     <td>${shop.Id}</td>
      //     <td><span>${shop.name}</span><input type="text"></td>
      //     <td><span>${shop.price}</span><input type="text"></td>
      //     <td><span>${shop.num}</span><input type="text"></td>
      //     <td>
      //       <button class="btn btn-xs btn-edit btn-info">编辑</button>
      //       <button class="btn btn-xs btn-del btn-danger">删除</button>
      //       <button class="btn btn-xs btn-ok btn-success">确定</button>
      //       <button class="btn btn-xs btn-cancel btn-warning">取消</button>
      //     </td>
      //   </tr>`
      // })

      let html = list.reduce((str, shop, index) => {
        console.log(index);
        str += `<tr data-id="${shop._id}">
            <td>${index + 1}</td>
            <td><span>${
              shop.name
            }</span><input class="shop-name" type="text"></td>
            <td><span>${
              shop.price
            }</span><input class="shop-price" type="text"></td>
            <td><span>${
              shop.num
            }</span><input class="shop-num" type="text"></td>
            <td>
              <button class="btn btn-xs btn-edit btn-info">编辑</button>
              <button class="btn btn-xs btn-del btn-danger">删除</button>
              <button class="btn btn-xs btn-ok btn-success">确定</button>
              <button class="btn btn-xs btn-cancel btn-warning">取消</button>
            </td>
          </tr>`;
        return str;
      }, "");

      tbody.innerHTML = html;
    } else {
      alert("网络失败，请重试");
    }
  });
}
